<template>
    <div class="avatar-upload">
        <div class="avatar-wrapper" @click="showDialog = true">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <div v-else class="avatar-placeholder">
                <span class="initial">{{ initial }}</span>
            </div>
        </div>
        <el-dialog v-model="showDialog" title="设置头像" width="400px">
            <div class="avatar-edit">
                <el-input v-model="urlInput" placeholder="请输入头像URL" />
                <div class="preview" v-if="urlInput">
                    <img :src="urlInput" class="preview-image" @error="handleImageError" />
                </div>
                <div class="actions">
                    <el-button @click="showDialog = false">取消</el-button>
                    <el-button type="primary" @click="handleConfirm">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const showDialog = ref(false)
const urlInput = ref('')

const emit = defineEmits(['update:imageUrl', 'file-change'])
const handleConfirm = () => {
  if (!urlInput.value) {
    ElMessage.warning('请输入头像URL')
    return
  }

  // 验证URL格式
  try {
    new URL(urlInput.value)
    emit('update:imageUrl', urlInput.value)
    emit('file-change', urlInput.value)
    showDialog.value = false
  } catch {
    ElMessage.error('请输入有效的URL地址')
  }
}

watch(
    () => props.imageUrl,
    newVal => {
        urlInput.value = newVal
    }
)
const props = defineProps({
  initial: {
    type: String,
    default: ''
  },
  imageUrl: {
    type: String,
    default: ''
  }
})

const handleImageError = () => {
    ElMessage.error('图片加载失败，请检查URL是否正确')
}


</script>

<style lang="less" scoped>
.avatar-upload {

  .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
    .avatar-wrapper {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s;

        &:hover {
            transform: scale(1.05);
        }



        .avatar-placeholder {
            background: #4caf50;
            width: 100%;
            display: flex;
            align-items: center;
            height: 100%;
            justify-content: center;

            .initial {
                color: #fff;
                font-size: 48px;
                font-weight: bold;
            }
        }
    }
}

.avatar-edit {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .preview {
        width: 100%;
        margin: 10px 0;
        justify-content: center;
        display: flex;

        .preview-image {
            max-height: 200px;
            border-radius: 8px;
            max-width: 200px;
            object-fit: cover;
        }
    }

    .actions {
        justify-content: flex-end;
        gap: 10px;
        display: flex;
    }
}
</style>
